<template>
	<view class="contentFoot" style="user-select: text;">
		<sunMenu></sunMenu>
		<view class="forgot-title">找回密碼 / Reset Password</view>
		<view class="forgot-form" style="padding: 0 100rpx;">
			<input type="text" class="input-field" placeholder="Email" v-model="formData.email" @blur="validateEmail" />
			<text v-if="emailError" class="error-text">{{ emailError }}</text>

			<view class="verification-row">
				<input type="text" class="input-field verification-code" placeholder="驗證碼" v-model="formData.code" />
				<button class="send-code-btn" :disabled="countdown > 0" @click="sendVerificationCode">
					{{ countdown > 0 ? `${countdown}秒後重試` : '獲取驗證碼' }}
				</button>
			</view>

			<input type="password" class="input-field" placeholder="新密碼" v-model="formData.password" />
			<input type="password" class="input-field" placeholder="確認新密碼" v-model="formData.confirmPassword" />
			<text v-if="passwordError" class="error-text">{{ passwordError }}</text>

			<button class="submit-btn" @click="handleReset">重設密碼</button>

			<view class="back-section">
				<text class="back-link" @click="goBack">返回登入</text>
			</view>
		</view>
		<view class="footer">
			<text class="footer-text">© 2025 夏璽玥網路有限公司 版權所有 XIA AKOYA INC. All Rights Reserved. 統一編號90370186</text>
			 
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import sunMenu from '../components/sun-menu/sun-menu.vue'
	import {
		sendEmailVerification,
		resetPwd
	} from '@/api/login'
	export default {
		components: {
			sunMenu
		},
		data() {
			return {
				formData: {
					email: '',
					code: '',
					password: '',
					confirmPassword: ''
				},
				emailError: '',
				passwordError: '',
				countdown: 0
			}
		},
		methods: {
			validateEmail() {
				const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/
				if (!this.formData.email) {
					this.emailError = 'Email不能為空'
					return false
				}
				if (!emailRegex.test(this.formData.email)) {
					this.emailError = '請輸入有效的Email地址'
					return false
				}
				this.emailError = ''
				return true
			},
			async sendVerificationCode() {
				if (!this.validateEmail()) return
				uni.showLoading({
					title: '發送中',
					mask: true,
				});
				sendEmailVerification(this.formData).then(res => {
					this.startCountdown()
					this.$modal.toast('驗證碼已發送')
				}).finally(res => {
					uni.hideLoading()
				})
			},
			startCountdown() {
				this.countdown = 60
				const timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						clearInterval(timer)
					}
				}, 1000)
			},

			validatePassword() {
				if (this.formData.password.length < 6) {
					this.passwordError = '密碼長度至少為6位'
					return false
				}
				if (this.formData.password !== this.formData.confirmPassword) {
					this.passwordError = '兩次輸入的密碼不一致'
					return false
				}
				this.passwordError = ''
				return true
			},

			validateForm() {
				if (!this.formData.email) {
					this.emailError = 'Email不能為空';
					return false;
				}
				if (!this.formData.code) {
					this.$u.toast('驗證碼不能為空');
					return false;
				}
				if (!this.formData.password) {
					this.passwordError = '新密碼不能為空';
					return false;
				}
				if (!this.formData.confirmPassword) {
					this.passwordError = '確認新密碼不能為空';
					return false;
				}
				return true;
			},

			async handleReset() {
				if (!this.validateEmail() || !this.validatePassword() || !this.validateForm()) return;
				resetPwd(this.formData).then(res => {
					uni.showModal({
						title: "系統提示",
						content: "恭喜你，您的帳號密碼重置成功！",
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/myLogin/myLogin'
								});
							}
						}
					})
				})
			},

			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.forgot-container {
		/* padding: 20px;
		max-width: 600px; */
		margin: 0 auto;
	}

	.forgot-title {
		text-align: center;
		font-size: 32px;
		margin-bottom: 40px;
		position: relative;
		margin-top: 80rpx;
		font-weight: 600;
		color: #333;
	}

	.forgot-title::after {
		content: '';
		position: absolute;
		bottom: -15px;
		left: 50%;
		transform: translateX(-50%);
		width: 80px;
		height: 3px;
		background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
		border-radius: 2px;
	}

	.verification-row {
		display: flex;
		gap: 10px;
		margin: 10px 0;
		align-items: center;
	}

	.verification-code {
		flex: 1;
		margin: 0;
		height: 90rpx;
	}

	.send-code-btn {
		width: 220rpx;
		background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 14px;
		padding: 0 15px;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		line-height: 1.2;
		height: 90rpx;
	}

	.send-code-btn:active {
		transform: scale(0.98);
	}

	.send-code-btn[disabled] {
		background: #e0e0e0;
		color: #999;
	}

	.submit-btn {
		width: 100%;
		padding: 15px;
		background: linear-gradient(135deg, #0DC5B4 0%, #09A396 100%);
		color: white;
		border: none;
		border-radius: 45rpx;
		margin: 30px 0;
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 1px;
		transition: all 0.3s ease;
		box-shadow: 0 4px 15px rgba(9, 163, 150, 0.2);
	}

	.submit-btn:active {
		transform: translateY(2px);
		box-shadow: 0 2px 8px rgba(9, 163, 150, 0.2);
	}

	.back-section {
		text-align: center;
		margin-top: 20px;
	}

	.back-link {
		color: #09A396;
		text-decoration: none;
		font-size: 16px;
		transition: all 0.3s ease;
	}

	.back-link:active {
		opacity: 0.8;
	}

	.input-field {
		width: 100%;
		margin: 15px 0;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		height: 90rpx;
		padding: 0 30rpx;
		font-size: 16px;
		transition: all 0.3s ease;
		background: #f8f8f8;
	}

	.input-field:focus {
		border-color: #09A396;
		background: #fff;
		box-shadow: 0 0 0 2px rgba(9, 163, 150, 0.1);
	}

	.error-text {
		color: #ff4444;
		font-size: 13px;
		margin-top: 6px;
		padding-left: 8px;
	}

	@media screen and (max-width: 768px) {
		.submit-btn {
			width: 80%;
			margin: 20px auto;
			padding: 10px;
			font-size: 16px;
		}
	}
</style>